<template>
	<div v-if="visible" class="modal-overlay">
		<div class="modal-content">
			<div class="img_box">
				<img ref="tip_img" v-if="lang == 'zh'" width="100%" :src="!is_force_login ? 'https://www.yyfuns.com/static/toptips/toptips.png' : `https://www.yyfuns.com/static/toptips/${route.query.id}.png`" alt="">
				<img ref="tip_img" v-if="lang == 'en'" width="100%" :src="!is_force_login ? 'https://www.yyfuns.com/static/toptips/toptips_en.png' : `https://www.yyfuns.com/static/toptips/${route.query.id}_en.png`" alt="">
			</div>
			<div class="modal" :style="lang == 'en' ? 'font-size: 12px;' : ''">
				<!-- <div class="count_down">
					<p class="p" :style="lang == 'en' ? 'text-align: left;' : {}">{{$t('count_down')}}： </p>
					<el-countdown v-if="!isEnd" format="mm:ss" :value="value" @finish="countdownEnd"/>
					<p v-if="isEnd">{{ $t('Ended') }}</p>
				</div> -->
				<div class="close" style="right: 5px;" @click="bindClose"></div>
				<div class="modal-header">
					<h3>{{$t('bind_user')}}</h3>
					<p>{{$t('bind_msg')}}</p>
					<p>{{$t('bind_msg3')}}</p>
					<p v-if="!is_force_login">{{$t('bind_msg2')}}</p>
					<p v-if="is_force_login">{{$t('bind_msg4')}}</p>
				</div>
				<div class="modal-body">
					<div class="modal_inp">
						<div class="inp" :style="'width:55%;'">
							<span class="star">*</span><input   type="text" v-model="username" id="email" :placeholder="$t('user_msg')">
						</div>
						<div class="inp_code"
							:style="{
								// 'margin-right': !codeShow ? '0' : '',
								'margin-left': codeShow ? (isDisabled ? '6px' : '9px') : ''
							}">
							<input ref="verificationInput" maxlength="6" @input="handleInput" v-model="verificationCode" type="text" :placeholder="$t('Verification_code')">
							<!-- <el-button v-show="!codeShow" class="btn" type="primary" @click="send_code">{{ $t('send_code') }}</el-button> -->
							<span :class="{filter:isDisabled}" @click="send_code">
								<div v-show="isDisabled">{{ $t('Resend') }}</div>
								<div v-show="!isDisabled">{{ $t('send_code') }}</div>
								<p v-show="isDisabled">({{countNum}}s)</p>
							</span>
						</div>
						<!-- <div class="inp_code_btn" v-show="codeShow">
							<el-button :style="isDisabled ? 'padding: 5px 10px;' : ''" class="btn" :type="isDisabled?'info' : 'primary'" :disabled="isDisabled" @click="send_code">{{ $t('Resend') }}<span v-show="isDisabled">({{countNum}}s)</span></el-button>
						</div> -->
					</div>
					<div class="modal_inp">
						<!-- <span class="star">&nbsp;</span> -->
						<el-select :style="lang == 'en' ? 'margin-left:10px;' : ''" @change="select_change" class="select" v-model="selectedCountry" :placeholder="$t('area')" size="small" >
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
						</el-select>
						<input type="text" v-model="phone_number" id="phone_number" :placeholder="$t('phone_number')">
					</div>
					<div class="modal_inp">
						<span class="star">*</span><input type="password" v-model="password" id="password" :placeholder="$t('pwd_msg')">
					</div>
				</div>
				<div class="modal-footer">
					<p @click="bindClose">{{$t('cancellation')}}</p>
					<p @click="handleSubmit">{{$t('confirm')}}</p>
				</div>
				<div class="third-party-login-wrapper">
					<div class="title">{{$t('other_bind')}}</div> 
					<div class="sns">
						<a @click="to_fb">
							<span class="btn facebook">Facebook {{$t('binding_fb')}}</span> 
						</a>
						<a @click="to_yh" v-if="!isFaceBook">
							<span class="btn Yahoo">Yahoo {{ $t('binding_fb') }}</span> 
						</a>
						<a @click="to_gg" v-if="!isFaceBook && !isAppShow">
							<span class="btn Google">Google {{ $t('binding_fb') }}</span> 
						</a>
						<!-- <span class="btn yahoo">Yahoo登錄</span> -->
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="masker_box" v-if="isTip">
		<div class="dialog_box">
			<div class="close" @click="isTip = false"></div>
			<h2>{{$t('Important_Notice')}}！</h2>
			<div class="tip">
				<svg t="1726225686646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13718" width="50" height="50"><path d="M887.466667 750.933333L601.6 183.466667c-38.4-72.533333-140.8-72.533333-174.933333 0L136.533333 750.933333c-29.866667 68.266667 17.066667 145.066667 89.6 145.066667h571.733334c72.533333 0 119.466667-76.8 89.6-145.066667z m-345.6 4.266667c-8.533333 8.533333-17.066667 12.8-29.866667 12.8-12.8 0-21.333333-4.266667-29.866667-12.8-8.533333-8.533333-12.8-17.066667-12.8-29.866667s4.266667-21.333333 12.8-29.866666 17.066667-12.8 29.866667-12.8c12.8 0 21.333333 4.266667 29.866667 12.8 8.533333 8.533333 12.8 17.066667 12.8 29.866666 0 12.8-4.266667 21.333333-12.8 29.866667zM554.666667 640h-85.333334V341.333333h85.333334v298.666667z" fill="#d81e06" p-id="13719"></path></svg>
				<p v-if="lang == 'zh'">因facebook應用內無法正常訪問yahoo網站原因，yahoo綁定需客戶在外部瀏覽器進行！</p>
				<p v-if="lang == 'zh'">雅虎綁定網址已為您複製，請打開瀏覽器，地址欄粘貼訪問即可綁定成功。</p>
				
				<p v-if="lang == 'en'">Due to the inability to access the Yahoo website within the facebook app, Yahoo binding requires customers to do it in an external browser!</p>
				<p v-if="lang == 'en'">The Yahoo binding URL has been copied for you. Please open your browser and paste it into the address bar to successfully bind it.</p>
				
			</div>
			<div class="modal-footer">
				<p @click="isTip = false">{{$t('confirm')}}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive} from "vue";
	import { useUserInfoStore } from '@/store/modules/user_info/index';
	import axios from '@/utils/api'
	import { useLoadingStore } from '@/store/modules/loading/index';
	import { useRoute } from "vue-router"
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	const loadingStore = useLoadingStore();
	const route = useRoute()
	let user_infoStore = useUserInfoStore();
	let user_info = reactive(user_infoStore.userInfo)

	let isFaceBook = false

	const isFacebookBrowser = () => {
		const userAgent = navigator.userAgent || navigator.vendor || window.opera;
		return /FBAN|FBAV/.test(userAgent); // 匹配Facebook浏览器的标识符
	}

	if (isFacebookBrowser()) {
		// console.log("当前是Facebook浏览器");
		isFaceBook = true
	} else {
		// console.log("当前不是Facebook浏览器");
		isFaceBook = false
	}

	// 定义一个函数，将给定的时间延长 33 分钟
	const add33MinutesToTime = (timeString) => {
		const targetDate = new Date(timeString);
		const extraMinutes = 33 * 60 * 1000;
		const finalTime = targetDate.getTime() + extraMinutes;
		return ref(finalTime);
	}

	const isEnd = ref(false)
	const addTime = add33MinutesToTime(user_info.created_at)

	const value = ref(addTime) //倒计时绑定的时间  Date.now() + 1000 * 60 * 33
	const tip_img = ref()
	
	const countdownEnd = ()=>{
		console.log('倒计时结束');
		isEnd.value = true
		if(lang == 'en'){
			tip_img.value.src = 'https://yyfuns.com/static/toptips_end_en.png'
		}else{
			tip_img.value.src = 'https://yyfuns.com/static/toptips_end.png'
		}
	}

	
	
	const props = defineProps(['visible','handleClose','getUserInfo','fb_bind_show','yh_bind_show','gg_bind_show','isGame','is_force_login']) //yh_bind_show
	const fb_bind_show = props.fb_bind_show
	const yh_bind_show = props.yh_bind_show
	const gg_bind_show = props.gg_bind_show
	const password = ref('')
	const username = ref('')
	const email = ref('')
	const phone_number = ref('')
	
	const handleSubmit = () => {
		const regex_username = /^[A-Za-z0-9@.,_]{6,20}$/;
		const regex_password = /^[A-Za-z0-9@.,_]{8,20}$/;
		
		// if(!regex_username.test(username.value)){
		// 	if(lang == 'en'){
		// 		ElMessage.error('The account format is inaccurate, with a minimum of 6 digits')
		// 	}else{
		// 		ElMessage.error('賬號格式不準確，最少6位')
		// 	}
			
		// 	return
		// }

		if (!validateInput(username.value)) return
		if (phone_number.value && !validateInput(phone_number.value,'phone')) return

		if(!regex_password.test(password.value)){
			if(lang == 'en'){
				ElMessage.error('The password format is not accurate, at least 8 is the password')
			}else{
				ElMessage.error('密碼格式不準確，最少8位密碼')
			}
			
			return
		}

		
		getOrder()
	};
	
	const bindClose = (type)=>{
		props.handleClose(type)
		password.value = ''
		username.value = ''
		email.value = ''
		verificationCode.value = ''
		phone_number.value = ''
	}

	const copy_code = (code) =>{
        if (navigator.clipboard && navigator.clipboard.writeText) {
            // 当前环境支持 clipboard API
            navigator.clipboard.writeText(code).then(() => {
                console.log('复制成功');
                // 使用你的消息提示
                if(lang == 'en'){
                    ElMessage.success('Copy successful');
                }else{
                    ElMessage.success('複製成功');
                }
                
            }).catch(err => {
                console.error('复制失败', err);
                ElMessage.error('复制失败');
            });
        } else {
            if(lang == 'en'){
                ElMessage.warning('The current environment does not support copying function, please manually copy');
            }else{
                ElMessage.warning('當前環境不支持複製功能，請手動複製');
            }
            
        }
    }

	let regex = ''
	const validateInput = (input,type)=> {
		if(type == 'phone'){
			if(!selectedCountry.value){
				ElMessage.error(t('area_tip'))
				return
			}
			switch (selectedCountry.value) {
				case 'TW':
					country = 'TW';
					regex = /^09\d{8}$/
					break;
				case 'HK':
					country = 'HK';
					regex = /^[5689]\d{7}$/
					break;
				case 'MO':
					country = 'MO';
					regex = /^6\d{7}$/
					break;
				case 'MY':
					country = 'MY';
					regex = /^(?:\+60|0)?(?:1[0-46-9]\d{7,8})$/
					break;
				case 'SG':
					country = 'SG';
					regex = /^[89]\d{7}$/
					break;	
				default:
					country = 'other';
					regex = /^\d{8,15}$/
					break;
			}

			if(regex.test(input)){
				return true
			}else{
				if(lang == 'en'){
					ElMessage.error('Please fill in the correct phone number');
				}else{
					ElMessage.error('請填寫正確的手機號');
				}
				return false
			}
		}
		else{
			regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			if(regex.test(input)){
				return true
			}else{
				if(lang == 'en'){
					ElMessage.error('Please fill in the correct email address or phone number');
				}else{
					ElMessage.error('請填寫正確的郵箱');
				}
				return false
			}
			
		}

		
	}
	// const validateInput = (input)=> {
		
	// 	if(input.includes('@') || selectedCountry.value == '0'|| selectedCountry.value == ''){
	// 		regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
	// 		if(regex.test(input)){
	// 			return true
	// 		}else{
	// 			if(lang == 'en'){
	// 				ElMessage.error('Please fill in the correct email address');
	// 			}else{
	// 				ElMessage.error('請填寫正確的郵箱');
	// 			}
	// 			return false
	// 		}
	// 	}else{
	// 		console.log(regex,555,selectedCountry.value);
	// 		if(regex.test(input)){
	// 			return true
	// 		}else{
	// 			if(lang == 'en'){
	// 				ElMessage.error('Please provide the correct phone number');
	// 			}else{
	// 				ElMessage.error('請填寫正確的手機號');
	// 			}
	// 			return false
	// 		}
	// 	}
	  
	// }
	let country = ''
	const getOrder = async () => {
		// switch (navigator.language) {
		// 	case 'zh-TW':
		// 		country = 'TW';
		// 		break;
		// 	case 'zh-HK':
		// 		country = 'HK';
		// 		break;
		// 	case 'zh-MO':
		// 		country = 'MO';
		// 		break;
		// 	case 'ms-MY':
		// 		country = 'MY';
		// 		break;
		// 	case 'en-SG':
		// 		country = 'SG';
		// 		break;	
		// 	default:
		// 		country = 'other';
		// 		break;
		// }
		const info = {
			username:username.value,
			password:password.value,
			id:user_info.id,
			code:verificationCode.value,
			phone_number:phone_number.value,
			country:selectedCountry.value
		}
		console.log(info);
		
		const data = await axios.post('/save_user',info)
		console.log(data);
		if (data.code == 200) {
			bindClose(1)
			if(lang == 'en'){
				ElMessage.success('Authentication successful');
			}else{
				ElMessage.success('認證成功');
			}
			if(!props.isGame){ //游戏中不调用，否则会刷新页面
				props.getUserInfo()
			}
			
		}else if(data.code == 6001){
			if(lang == 'en'){
				ElMessage.error('Binding failed，The username already exists');
			}else{
				ElMessage.error('綁定失敗，'+data.message);
			}
		}else if(data.code == 60010){
			if(lang == 'en'){
				ElMessage.error('Please click to send the verification code first');
			}else{
				ElMessage.error('綁定失敗，'+data.message);
			}
		}else if(data.code == 60011){
			if(lang == 'en'){
				ElMessage.error('Verification code error, please re-enter');
			}else{
				ElMessage.error('綁定失敗，'+data.message);
			}
		}else {
			if(lang == 'en'){
				ElMessage.error('Binding failed，'+data.message);
			}else{
				ElMessage.error('綁定失敗，'+data.message);
			}
		}
	}

	

	const selectedCountry = ref('')
	const lang = localStorage.getItem('lang')
	let options = []
	if(lang == 'en'){
		options = [
			{
				value: 'TW',
				label: 'Taiwan +886',
			},
			{
				value: 'HK',
				label: 'Hong Kong +852',
			},
			
			{
				value: 'MO',
				label: 'Macao +853',
			},
			{
				value: 'MY',
				label: 'Malaysia +60',
			},
			{
				value: 'SG',
				label: 'Singapore +65',
			},
			// {
			// 	value: '0',
			// 	label: 'email',
			// },
		]
	}else{
		options = [
			{
				value: 'TW',
				label: '台灣 +886',
			},
			{
				value: 'HK',
				label: '香港 +852',
			},
			
			{
				value: 'MO',
				label: '澳門 +853',
			},
			{
				value: 'MY',
				label: '馬來西亞 +60',
			},
			{
				value: 'SG',
				label: '新加坡 +65',
			},
			// {
			// 	value: '0',
			// 	label: '郵箱/帳號',
			// },
		]
	}
	
	const setCity = ()=>{
		selectedCountry.value = 'TW';
		regex = /^09\d{8}$/
		// switch (navigator.language) {
		// 	case 'zh-TW':
				
		// 		break;
		// 	case 'zh-HK':
		// 		selectedCountry.value = 'HK';
		// 		regex = /^[5689]\d{7}$/
		// 		break;
		// 	case 'zh-MO':
		// 		selectedCountry.value = 'MO';
		// 		regex = /^6\d{7}$/
		// 		break;
		// 	case 'ms-MY':
		// 		selectedCountry.value = 'MY';
		// 		regex = /^(?:\+60|0)?(?:1[0-46-9]\d{7,8})$/
		// 		break;
		// 	case 'en-SG':
		// 		selectedCountry.value = 'SG';
		// 		regex = /^[89]\d{7}$/
		// 		break;
		// 	default:
		// 		regex = /^\d{8,15}$/
		// 		break;	
		// }
	}
	setCity()
	const handleChange = (event)=>{
		if(event.target.value.includes('@')){
			selectedCountry.value = '0'
		}else{
			setCity()
		}
	}

	const select_change = (value)=>{
		switch (value) {
			case 'TW':
				regex = /^09\d{8}$/
				break;
			case 'HK':
				regex = /^[5689]\d{7}$/
				break;
			case 'MO':
				regex = /^6\d{7}$/
				break;
			case 'MY':
				regex = /^(?:\+60|0)?(?:1[0-46-9]\d{7,8})$/
				break;
			case 'SG':
				regex = /^[89]\d{7}$/
				break;
			default:
				regex = /^\d{8,15}$/
				break;
		}
	}

	const fb_url = ref('')
	const get_fb_auth_url = async ()=>{
		const res = await axios.get(`/get_fb_auth_url?type=binding`)
		// console.log(res);
		if(res.code === 200){
			fb_url.value = res.data.fb_auth_url
		}
	}
	get_fb_auth_url()
	const to_fb = ()=>{
		bindClose()
		window.open(fb_url.value)
		fb_bind_show()
	}

	const yh_url = ref('')
	const get_yh_auth_url = async ()=>{
		const res = await axios.get(`/get_yh_auth_url?type=binding&user_id=${user_info.id}`)
		// console.log(res);
		if(res.code === 200){
			yh_url.value = res.data.yh_auth_url
		}
	}
	get_yh_auth_url()
	const to_yh = ()=>{
		if (isFacebookInAppBrowser()) {
		//   alert('当前环境是在 Facebook 的内嵌浏览器中');
		  copy_code(yh_url.value)
		  isTip.value = true
		}else{
			// alert('当前不在');
			bindClose()
			window.open(yh_url.value)
			yh_bind_show()
		}
	}

	const gg_url = ref('')
	const get_gg_auth_url = async ()=>{
		const res = await axios.get(`/get_gg_auth_url?type=binding`)
		// console.log(res);
		if(res.code === 200){
			gg_url.value = res.data.gg_auth_url
		}
	}
	get_gg_auth_url()
	const to_gg = ()=>{
		bindClose()
		window.open(gg_url.value)
		gg_bind_show()
	}

	const isTip = ref(false)
	function isFacebookInAppBrowser() {
	  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
	  const isFacebookBrowser = /FBAN|FBAV/.test(userAgent);
	  return isFacebookBrowser;
	}

	const codeShow = ref(true)
	const isDisabled = ref(false)
	const countNum = ref(60)
	const verificationCode = ref('')
	const verificationInput = ref()
	const handleInput = (e) => {
		verificationCode.value = e.target.value.replace(/\D/g, '')
	}
	const send_code = async ()=>{
		if (validateInput(username.value)) {
			loadingStore.startLoading();
			const res = await axios.post('/send_email',{email:username.value,is_register:1})
			loadingStore.stopLoading();
			if(res.code == 200){
				if(lang == 'en'){
					ElMessage.success('Verification code sent successfully')
				}else{
					ElMessage.success('驗證碼發送成功')
				}
				verificationCode.value = ''
				codeShow.value = true
				isDisabled.value = true
				nextTick(() => {
					verificationInput.value.focus()
				})
				const countdown = setInterval(() => {
					countNum.value -= 1
					if(countNum.value == 0){
						clearInterval(countdown);
						isDisabled.value = false
						countNum.value = 60
					}
				}, 1000);
			}else if(res.code == 600020){
				if(lang == 'en'){
					ElMessage.error('This email has already been registered, please re-enter')
				}else{
					ElMessage.error(res.message)
				}
			}else{
				ElMessage.error(res.message)
			}
			
		}
		
	}

	let isAppShow = ref(false)
	const isApp = ()=>{
		if (typeof webkit !== 'undefined' || typeof AndroidInterface !== 'undefined') {
			isAppShow.value = true
			return true;
		} else {
			isAppShow.value = false
			return false;
		}
	}
	isApp()
</script>

<style>
.el-select__wrapper {
    border-radius: 8px !important;
	height: 43px;
}
</style>
<style lang="less" scoped>
	@media (max-height: 400px) {
		.modal-content{
			transform: scale(0.7);
		}
	}
	@media (max-width: 1025px) {
		.modal-content{
			transform: scale(0.85);
		}
	}
	/* 模态框样式 */
	.modal-overlay,
	.modal-setPwd {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2001;
		input{
			text-align: left;
		}
		@media (max-height: 400px) {
			.modal-content{
				display: flex;
			}
            .img_box{
				height: 383px;
				overflow: hidden;
				border-radius: 12px 0 0 12px;
				// background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
				img{
					// position: relative;
					// top: 0;
					// transform: translateY(-50%);
					border-radius: 12px 0 0 12px;
				}
			}
        }
		@media (min-height: 401px) {
			.img_box{
				height: 250px;
				width: 393px;
				img{
					border-radius: 12px 12px 0 0;
				}
			}
		}
		
	}
	
	.modal-setPwd {
		z-index: 1001 !important;
	}
	@media (max-width: 400px) {
		// .modal {
		// 	width: 270px !important;
		// }
		// .img_box{
		// 	width: 310px !important;
		// }
		.modal-content{
			transform: scale(0.7);
		}
	}
	@media (max-height: 400px) {
		.modal {
			top: 0 !important;
			border-radius: 0 12px 12px 0 !important;
			box-shadow:none !important; 
		}
	}
	.modal {
		background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
		border-radius: 0 0 12px 12px;
		padding: 20px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		width: 353px;
		text-align: center;
		position: relative;
		top: -4px;
		.count_down{
			width: 85%;
			color: red;
			font-weight: bold;
			padding-bottom: 10px;
			*{
				margin: 0;
			}
		}
		@media (max-height: 400px) {
			.third-party-login-wrapper {
				margin-top: 7px !important;
			}
			.title {
				padding: 5px;
				margin-bottom: 0 !important;
			}
		}
		.third-party-login-wrapper {
			
            margin-top: 24px;
            .title {
                font-size: 13px;
                line-height: 16px;
                text-align: center;
                color: #999;
                margin-bottom: 12px;
            }
            .sns {
                // width: 300px;
                display: flex;
                justify-content: center;
                a{
					text-decoration: none;
					color: #000;
				}
                .btn {
                    margin-right: 30px;
                    cursor: pointer;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin: 0;
                }
                .facebook:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/fb.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
                .Yahoo:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/yahoo.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
				.Google:before {
                    display: inline-block;
                    content: "";
                    width: 28px;
                    height: 28px;
                    margin-right: 8px;
                    background: url(https://www.yyfuns.com/static/google.png) no-repeat;
                    background-size: cover;
                    border-radius: 50%;
                }
				@media (max-width: 1024px) {
					.Google:before,.Yahoo:before,.facebook:before {
						width: 20px !important;
						height: 20px !important;
						margin-right: 4px !important;
					}
					.btn{
						font-size: 10px !important;
					}
				}
            }
        }
	}
	
	.modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		flex-direction: column;
		p{
			font-size: 13px;
			margin-top: 5px;
			color: #7f7f7f;
			text-align: left;
		}
	}
	
	.modal-header h3 {
		margin: 0;
		font-size: 24px;
		color: #3c4043;
		font-family: 'Roboto', sans-serif;
	}
	
	.close-button1 {
		background: none;
		border: none;
		font-size: 28px;
		color: #9aa0a6;
		cursor: pointer;
		transition: color 0.3s ease;
		position: absolute;
		right: 20px;
		top: 5px;
	}
	
	.close-button1:hover {
		color: #1a73e8;
	}
	
	.modal-body {
		margin-bottom: 20px;
		.modal_inp{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			// @media (max-width: 400px) {
				// .select{
				// 	width: 100px !important;
				// }
				// input{
				// 	width: 140px !important;
				// }
			// }
			.select{
				width: 150px;
				margin: 0;
				margin-right: 10px;
				margin-left: 12px;
				/deep/ .el-select__wrapper{
					border-radius: 5px !important;
				}
			}
			input:focus{
				outline: none;
				border:1px solid #1890ff;
			}
			input{
				transition: all .3s;
				font-size: 14px;
				margin-right: 2px;
			}
			.inp{
				display: flex;
				justify-content: space-between;
				margin: 0;
				transition: all .3s;
			}
			.inp_code{
				flex: 0.93;
				transition: all .3s;
				position: relative;
				font-size: 12px;
				.btn{
					height: 100%;
					border-radius: 5px;
				}
				span{
					position: absolute;
					right: 2px;
					top: 50%;
					transform: translateY(-50%);
					color: #1890ff;
					cursor: pointer;
				}
				.filter{
					filter: grayscale(1);
					pointer-events: none;
				}
			}
			.inp_code_btn{
				margin-right: 1px;
				transition: all .3s;
				.btn{
					height: 100%;
					border-radius: 5px;
					font-size: 12px;
					// padding: 5px 10px;
					transition: all .3s;
					span{
						transition: all .3s;
					}
				}
			}
		}
	}
	
	.modal-body label {
		display: block;
		font-size: 16px;
		color: #3c4043;
		margin-bottom: 5px;
		font-family: 'Roboto', sans-serif;
	}
	
	.modal-body input {
		width: 90%;
		padding: 10px;
		border: 1px solid #dadce0;
		border-radius: 5px;
		font-size: 16px;
		// font-family: 'Roboto', sans-serif;
	}
	
	.modal-footer {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}
	
	.modal-footer p {
		margin-left: 0px;
		padding: 0;
		width: 48%;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		// transition: all 0.3s ease;
		font-family: 'Roboto', sans-serif;
		// margin-right: 0;
		background-color: #1890ff;
		color: white;
	}
	.modal-footer p:hover{
		background-color: rgba(#1890ff,.7);
	}

	.modal-footer p:active{
		background-color: rgba(#0c76d8,.9);
	}
	
	.modal-footer .cancel-button {
		background-color: #f5f5f5;
		color: #3c4043;
	}
	
	.modal-footer .cancel-button:hover {
		background-color: #ebebeb;
	}
	
	.modal-footer .confirm-button {
		background-color: #1a73e8;
		color: #fff;
	}
	
	.modal-footer .confirm-button:hover {
		background-color: #174ea6;
	}

	.masker_box{
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.6);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999;
		display: flex;
		align-items: center;
		.dialog_box{
			position: relative;
			width: 250px;
			background-color: white;
			border-radius: 15px;
			padding: 20px;
			.tip{
				display:flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}
			h2{
				text-align: center;
				margin: 0;
			}
			p,svg{
				margin: 0;
				margin-top: 5px;
			}
			.modal-footer{
				text-align: center;
			}
		}
	}
	.star{
		color: red;
		margin-right: 5px;
		font-weight: bold;
	}
	
</style>